<style type="text/css">
    .user-baseinfo{
        background-color: #f0f0f0;margin: 15px;padding: 15px;
    }
    .nav-pills-active{
        border-bottom: 1px solid #f10808;
    }
    .nav-pills-active a{
        color:#f10808 !important;
    }
    .hero-unit{
        display: flex;
        position: relative;
        padding: 1%;
        margin: 0.5% 0 0 0.5%;
        float: left;
        border: 1px solid #000;
    }
    .hero-unit ul li{
        list-style: none;
        line-height: 30px;
    }
    .delete-item,.delete-server{
        padding: 5px;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 5px;
        top: 50px;
        right: 10px;
        position:absolute;
        font-size: 15px;
        cursor: pointer;
    }
    .delete-item:hover,.delete-server:hover{
        color:#000;
        background-color: #fff;
    }
    .coupon-item-list{
        display: none;
    }

    .item-list{
        height: 600px;
        overflow-y: auto;
    }
    .item-title{
        height: 70px;
    }
    .btn-tag-add{
        cursor: pointer;
    }
    .item-status{
        padding: 5px;
        border: 1px solid #fff;
        color: #000;
        border-radius: 5px;
        top: 50px;
        right: 10px;
        position:absolute;
        font-size: 15px;
        cursor: pointer;
    }
</style>
<div class="panel panel-default panel-intro">
    {:build_heading()}
 
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-10">
                    <span>操作</span>
                </div>
                <div class="col-xs-2">
                    <div class="float-right col-xs-6">
                        <button type="button" class="btn btn-info set-tags" data-url="{:url('user/user/addusertag')}" data-id="{$userData['id']}" style="color:#fff;background-color:#f75444">设置标签</button>
                    </div>
                    <div class="float-right col-xs-6">
                        <button class="btn btn-info btn-open-nested-dialog edit-user" data-url="{:url('user/user/edit')}" data-id="{$userData['id']}" style="color:#fff;background-color:#f75444">编辑资料</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row user-baseinfo">
                <div class="panel-heading print-flex">
                    <img src="{$userData.avatar}" class="img-lg img-circle" alt="">
                </div>
                <div class="col-xs-2">
                    <div class="float-right col-xs-12" >
                        <p class="text-left">{$userData['nickname']} {$userData['mobile']}</p>
                        <p class="text-left"><span class="label label-warning">{$groupName}</span> <!--label class="label label-info">升级等级会员</label--></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row p-2">
                <div class="col-xs-3">
                    客户编号：<span>{$userData['code']}</span>
                </div>
                <div class="col-xs-3">
                    生日：<span>{$userData['birthday']}</span>
                </div>
                <div class="col-xs-3">
                    归属门店：<span>{$userData['shop_name']}</span>
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-3">
                    营销顾问：<span></span>
                </div>
                <div class="col-xs-3">
                    注册时间：<span>{$userData['createtime']|date="Y-m-d H:i:s",###}</span>
                </div>
                <div class="col-xs-3">
                    客户来源：{$userData['juser_user']}<span></span>
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-12">
                    客户标签：<span class="label label-success set-tags"  data-url="{:url('user/user/addusertag')}" data-id="{$userData['id']}" style="color:#f75444;background-color:#f0f0f0;">+新增标签</span> 
                    {foreach name="userTags" item="vo"}
                        <span class="label label-warning" style="color:#000;background-color:#f0f0f0;">{$vo['tag']['name']}</span> 
                    {/foreach}
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-12">
                    备注：<span>{$userData['remark']}</span>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row p-2">
                <span>统计信息</span>
            </div>
            <div class="row p-2">
                <table id="statistics_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    <thead>
                        <tr>
                            <th style="text-align:center;">个人账户（元）</th>
                            <th style="text-align:center;">充值卡余额（元）</th>
                            <th style="text-align:center;">累计消费总额（元）</th>
                            <th style="text-align:center;">总消费次数</th>
                            <th style="text-align:center;">最近消费时间</th>
                            <th style="text-align:center;">到店次数</th>
                            <th style="text-align:center;">上一次到店</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="text-align:center;">
                            <td>{$userData['money']}元</td>
                            <td style="color:#ee0000">{$recharge_balance}元</td>
                            <td>{$total_order_fee}</td>
                            <td>{$total_order_times}</td>
                            <td>{$total_order_time}</td>
                            <td>{$offline_order_times}</td>
                            <td>{$last_order_time}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row p-2">
                <ul class="nav nav-pills items" >
                    <li class="nav-pills-active"><a href="javascript:void(0);">卡项（{$orderItemCount}）</a></li>
                    <li><a href="javascript:void(0);">优惠券（{$couponCount}）</a></li>
                    <li><a href="javascript:void(0);">赠送（服务）（{$orderGoodsCount}）</a></li>
                </ul>
            </div>
            <div class="row p-2 item-list">
                <div class="col-xs-12">
                    {foreach name="orderItemList" item="vo"}
                        {if $vo['is_available'] == 1}
                            <div class="hero-unit col-xs-3 card" id="card{$vo['id']}" style="background-color:{$vo['bgcolor']}">
                        {else}
                            <div class="hero-unit col-xs-3 card" id="card{$vo['id']}" style="background-color:'#edf2fa' !important;">
                        {/if}
                            <ul>
                                <li>{$vo['name']}</li>
                                <li>开卡门店：{$vo['shop_name']}</li>
                                <li>剩余：{$vo['spent']}{$vo['item_type_unit']}</li>
                                <li>有效期：{$vo['validitytime']}</li>
                            </ul>
                            {if $vo['is_available'] == 1}
                                <div class="item-status delete-item" data-itemid="{$vo['id']}"><span class="status_text">使失效</span> </div>
                            {else}
                                <div class="item-status"><span class="status_text">已失效</span> </div>
                            {/if}
                        </div>
                    {/foreach}
                </div>
            </div>
            <div class="row p-2 item-list coupon-item-list">
                <div class="col-xs-12">
                    {foreach name="couponList" item="vo1"}
                    <div class="hero-unit col-xs-3" style="background-color:#e4c477;">
                        <ul>
                            {if $vo1['is_gift'] == 1}
                            <li>{$vo1['name']}<i style="color:#e60012;">(赠)</i></li>
                            {else}
                            <li>{$vo1['name']}</li>
                            {/if}
                            <li>开卡门店：{$vo1['shop_name']}</li>
                            <li>剩余次数：{$vo1['validity']}次</li>
                            <li>有效期：{$vo1['enddate']}</li>
                        </ul>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="row p-2 item-list coupon-item-list">
                <div class="col-xs-12">
                    {foreach name="orderGoodsList" item="vo2"}
                    <div class="hero-unit col-xs-3 service" id="service{$vo2['id']}" style="background-color:{$vo2.bgcolor};width:24%">
                        <ul>
                            <li class="item-title">{$vo2['title']}</li>
                            <li>开卡门店：{$vo2['shop_name']}</li>
                            <li>状态：{$vo2['valid']}</li>
                            <li>有效期至：{$vo2['validtime']}</li>
                        </ul>
                        {if $vo2['is_valid'] == 1}
                            <div class="item-status delete-server" data-itemid="{$vo2['id']}"><span class="status_text">使失效</span> </div>
                        {else}
                            <div class="item-status"><span class="status_text">已失效</span> </div>
                        {/if}
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="row p-2">
                <span>统计信息</span>
            </div>
            <div class="row p-2">
                <ul class="nav nav-pills" >
                  <li class="nav-pills-active">
                    <a href="javascript:void(0);" class="trade_number">交易记录（0）</a>
                  </li>
                  <!-- <li><a href="javascript:void(0);">跟进记录（10）</a></li> -->
                </ul>
            </div>
            <div class="row p-2">
                <table id="order_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%"></table>
            </div>
        </div>
    </div>
</div>